<template>
    <div class="about-us">
        <header>
            <hoomnavbar :active-index="5"/>
        </header>
        <main>
            <div class="banner-wrap">
                <img class="img-bg" src="../assets/imgs/aboutus/banner-bg.jpg" alt="">
                <div class="banner-container">
                    <div class="banner-left">
                        <div class="banner-yunhao animater-el" data-animater="animate__fadeInDown"></div>
                        <div class="banner-science animater-el" data-animater="animate__fadeInDown"></div>
                        <div class="banner-yunhaokeji animater-el" data-animater="animate__fadeInDown">
                            <img src="../assets/imgs/aboutus/grid.png" alt="">
                            <img src="../assets/imgs/aboutus/yunhaokeji.png" alt="">
                        </div>
                    </div>
                    <div class="banner-right">
                        <div class="banner-right-grid animater-el" data-animater="animate__fadeInDown"></div>
                    </div>
                </div>
            </div>
            <div class="company-info">
                <div class="company-info-top">
                    <div class="wrap">
                        <div class="company-introduce">
                            <div class="company-introduce-left animater-el" data-animater="animate__fadeInDown">
                                <p>
                                    成都云浩科技有限公司成立于2006年，是业内全面领先的新零售智慧门店服务商。公司总部位于成都高新技术产业开发区，在北京、上海、湖北、湖南、 云南、重庆、陕西设有分公司
                                </p>
                                <p>
                                    历经十余年发展，云浩科技已累计为100000+实体商家提供过商家管理软件及互联网营销增值服务，帮助商家实现线下高效管理，线上高能营销，线上线下实体经济与互联网完美结合，有效降低营销成本、提升营销收益。
                                </p>
                            </div>
                            <div class="company-introduce-right" ref="animaterel">
                                <img src="../assets/imgs/aboutus/company_introduce.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="corporate-culture">
                <div class="wrap">
                    <div class="culture-wrap">
                        <img  class="animater-el" data-animater="animate__zoomIn" src="../assets/imgs/aboutus/culture_pic.png" alt="">
                    </div>
                    <div class="corporate-caption">
                        <div class="corporate-caption-row1 animater-el" data-animater="animate__fadeInRight">
                            <div class="corporate-caption-dashed"></div>
                            <h2>企业文化</h2>
                        </div>
                        <div class="corporate-caption-row2">
                            <img class="corporate-caption-grid animater-el" data-animater="animate__fadeInLeft" src="../assets/imgs/aboutus/develop_grid.png" alt="">
                            <img class="corporate-caption-pic animater-el" data-animater="animate__fadeInRight" src="../assets/imgs/aboutus/corporate culture.png" alt="">
                        </div>
                    </div>
                    <div class="corporate-culture-container">
                        <ul>
                            <li class="culture-item">
                                <img class="culture-item-bg animater-el" data-animater="animate__zoomIn" src="../assets/imgs/aboutus/culture_bg_1.png" alt="">
                                <div class="culture-item-content animater-el" data-animater="animate__fadeInDown">
                                    <b>企业愿景</b>
                                    <p>打造中国百业商圈生态系统</p>
                                </div>
                            </li>
                            <li class="culture-item">
                                <img class="culture-item-bg animater-el" data-animater="animate__zoomIn" src="../assets/imgs/aboutus/culture_bg_2.png" alt="">
                                <div class="culture-item-content animater-el" data-animater="animate__fadeInDown">
                                    <b>企业使命</b>
                                    <p>让实体生意更好做</p>
                                </div>
                            </li>
                            <li class="culture-item">
                                <img class="culture-item-bg animater-el" data-animater="animate__zoomIn" src="../assets/imgs/aboutus/culture_bg_1.png" alt="">
                                <div class="culture-item-content animater-el" data-animater="animate__fadeInDown">
                                    <b>企业价值观</b>
                                    <p>利他、互惠、多赢、整体</p>
                                </div>
                            </li>
                            <li class="culture-item">
                                <img class="culture-item-bg animater-el" data-animater="animate__zoomIn" src="../assets/imgs/aboutus/culture_bg_1.png" alt="">
                                <div class="culture-item-content animater-el" data-animater="animate__fadeInDown">
                                    <b>品牌理念</b>
                                    <p>实业与互联网相互依存，<br/>传统与新经济彼此促进<span>空</span></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                     <div class="develop-caption">
                        <div class="corporate-caption-row1 animater-el" data-animater="animate__fadeInLeft">
                            <h2>发展历程</h2>
                            <div class="corporate-caption-dashed"></div>
                        </div>
                        <div class="corporate-caption-row2">
                            <img class="corporate-caption-pic animater-el" data-animater="animate__fadeInLeft" src="../assets/imgs/aboutus/corporate culture.png" alt="">
                            <img class="corporate-caption-grid animater-el" data-animater="animate__fadeInRight" src="../assets/imgs/aboutus/develop_grid.png" alt="">
                        </div>
                    </div>
                    <div class="develop-chart-wrap">
                        <div class="develop-chart">
                            <div class="develop-chart-top">
                                <div class="dashed-dot">
                                    <div class="solid-dashed"></div>
                                    <div class="dashed-wrap">
                                        <ul>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="develop-box develop-box1">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown">
                                        <b>2006年</b>
                                        <p>云浩科技公司成立</p>
                                    </div>
                                </div>
                                <div class="develop-box develop-box2">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="100">
                                        <b>2010-2014年</b>
                                        <p>
                                            自主研发的收银管理软件企汇通1.0、2.0、3.0版本正式上线
                                        </p>
                                    </div>
                                </div>
                                <div class="develop-box develop-box3">
                                     <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="200">
                                        <b>2015年</b>
                                        <p>
                                            云浩科技全国首创微信拓客模式销售:微信拓客 上线！
                                        </p>
                                    </div>
                                </div>
                                <div class="develop-box develop-box4">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="300">
                                        <b>2016年</b>
                                        <p>
                                            微信拓客正式升级到美帮美汇2.0版本
                                        </p>
                                    </div>
                                </div>
                                <div class="develop-box develop-box5">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="400">
                                        <b>2018年</b>
                                        <p>
                                            云浩科技空中商城正式上线
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="develop-chart-bottom">
                                <div class="dashed-dot">
                                    <div class="solid-dashed"></div>
                                    <div class="dashed-wrap">
                                        <ul>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="develop-box develop-box6">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="200">
                                        <b>2019年</b>
                                        <p>
                                            云浩会员总数已达2620万人，<br/>合作商家已达10万家，同年<br/>AI视觉营销系统正式上线
                                        </p>
                                    </div>
                                </div>  
                                <div class="develop-box develop-box7">
                                    <div class="dot-box-content animater-el" data-animater="animate__fadeInDown" data-delay="250">
                                        <b>2020年</b>
                                        <p>
                                            美帮美汇3.0版本正式开启，全力打造企业视频信息（活动）共享平台，<br/>同年新增企业解决方案业务，全方位助力企业解决营销难题                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="honor-wall">
                <img class="honor-wall-bg" src="../assets/imgs/aboutus/honor_bg.png" alt="">
                <div class="honor-wrap">
                    <div class="honor-wall-container">
                        <div class="honor-left">
                            <img class="yunhaokeji animater-el" data-animater="animate__fadeInLeft" src="../assets/imgs/aboutus/YUNHAO.png" alt="">
                            <div class="honor-log-wrap animater-el" data-animater="animate__fadeInLeft">
                                <img src="../assets/imgs/aboutus/honor_log.png" alt="">
                                云浩荣誉
                            </div>
                            <div class="honor-grid animater-el" data-animater="animate__fadeInLeft"></div>
                        </div>
                        <div class="honor-right">
                            <div class="honor-box">
                                <ul>
                                    <li class="animater-el" data-animater="animate__fadeInRight">AAA级信用企业</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2013年四川省信息产业厅授予四川省行业信息化创新产品 </li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2013年中国软件行业协会授予2013年度推荐优秀软件</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2013年中国国际软件博览会授予第十七届中国国际软件博览会创新奖、金奖</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2014年成为成都市软件行业协会理事单位</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2017年世界移动互联网大会授予移动互联网最具品牌价值企业</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2017年CECA、WMIC授予移动互联网创新行业</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2018年《财经界》、北京宸信征信有限公司授予中国经济年度高成长品牌企业</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2018年荣获高新技术企业</li>
                                    <li class="animater-el" data-animater="animate__fadeInRight">2019年选举为成都市软件行业协会理事单位</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="partner-recruit">
                <div class="card-wrap animater-el" data-animater="animate__zoomIn">
                    <div class="card-container">
                        <div class="card-top">
                            <div class="card-top-left">
                                <img class="yunhao-log animater-el" data-animater="animate__fadeInDown" src="../assets/imgs/aboutus/banner_yunhao.png" alt="">
                                <div class="name-row animater-el" data-animater="animate__fadeInDown">
                                    <!-- <b>牟先生</b> -->
                                    <img src="../assets/imgs/aboutus/mousir.png" alt="">
                                    <span>TEL: 152 2886 1916</span>
                                </div>
                                <div class="card-grid"></div>
                            </div>
                            <div class="card-top-right animater-el" data-animater="animate__fadeInRight">
                                <img class="business" src="../assets/imgs/aboutus/business_pic.png" alt="">
                                <b>商务合作</b>
                                <div class="card-right-grid"></div>
                            </div>
                        </div>
                        <div class="card-bottom animater-el" data-animater="animate__fadeInDown">
                            <b>云浩合伙人招募</b>
                            <p>
                                若您有优质的项目、或具备行业教育能力、或具备营销宣传能力，欢迎加入云浩合伙人。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay-methods" ref="paymethods">
                <div class="pay-methods-wrap">
                    <div class="pay-methods-left">
                        <div class="pay-methods-left-top animater-el" data-animater="animate__fadeInDown">
                            <img class="terms_pic" src="../assets/imgs/aboutus/terms.png" alt=""><br/>
                            <b>付款方式</b>
                            <p>1.微信、支付宝转款<span></span>2.对公账号信息</p>
                            <div class="grid"></div>
                            <div class="tips-box">
                                <p>
                                    为了保障您的合法权益，与云浩公司所有款项，请务必转到公司指定账户，可选择：微信、支付宝、对公账户转账。云浩老客户可选择进软件后自助续费，自动生效，这样更加方便快捷。
                                </p>
                                <p>
                                    转款到其它账户或个人收款，公司概不负责，同时不再受理其所提交业务，敬请理解！
                                </p>
                            </div>
                        </div>
                        <div class="pay-methods-left-bootom animater-el" data-animater="animate__fadeInDown">
                            <b>特别说明</b>
                            <div class="explain-wrap">
                                <p>
                                    1. 转账后请及时联系财务人员，核对收款信息后立即处理相关业务。
                                </p>
                                <p>
                                    2. 公司财务专线：028-87737988      佟女士：158 2823 9559。
                                </p>
                                <p>
                                    3. 在联系时请告知客户编号、店铺名称、转款金额、转款事由（比如充短信、续费等）。
                                </p>

                            </div>
                        </div>

                    </div>
                    <div class="pay-methods-right">
                        <div class="pay-methods-right-top animater-el" data-animater="animate__fadeInDown">
                            <b>1.微信、支付宝转款</b>
                            <div class="qrcode-wrap">
                                <div class="qrcode-item">
                                    <img src="../assets/imgs/aboutus/wechart_qrcode.jpg" alt="">
                                    <p>微信账户</p>
                                </div>
                                <div class="qrcode-item">
                                    <img src="../assets/imgs/aboutus/zhifubao_qrcode.jpg" alt="">
                                    <p>支付宝账户</p>
                                </div>
                            </div>
                        </div>
                        <div class="pay-methods-right-bottom animater-el" data-animater="animate__fadeInDown">
                            <b>2.对公账号信息</b>
                            <div class="count-info-wrap animater-el" data-animater="animate__fadeInDown">
                                <ul>
                                    <li>
                                        <div class="lable"><span>名</span><span>称:</span></div>成都云浩科技有限公司
                                    </li>
                                    <li>
                                        <div class="lable"><span>账</span><span>号:</span></div>5100 1406 1370 5152 4475
                                    </li>
                                    <li>
                                        <div class="lable"><span>开</span><span>户</span><span>行:</span></div>中国建设银行成都市高新支行
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <hoomfooter/>
        </footer>
    </div>
</template>
<script>
import Observer from '../utils/observer.js'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'
export default {
    components:{
        hoomnavbar,
        hoomfooter
    },
    data(){
        return{
            observer:'',
        }
    },
    mounted(){
        this.$refs.animaterel.classList.add('animate__animated','animate__fadeInDown')
        const els2 = document.querySelectorAll('.animater-el');
        this.observer = Observer({
                els:els2,
                threshold:0.2
            },(el)=>{
                const classStr = el.dataset.animater.split(',');
                const delay = el.dataset.delay;
                if(delay) return setTimeout(()=>{
                    el.parentElement.style.visibility = "visible";
                    el.style.visibility = 'visible';
                    el.classList.add(classStr[0])
                },+delay)
                el.style.visibility = 'visible';
                el.classList.add(classStr[0])
            })
    },
    beforeDestroy(){
        this.observer && window.removeEventListener('scroll',this.observer)
    },
    created(){
        // console.log(this.$route);
        if(this.$route.hash){
            this.$nextTick(()=>{
                console.log(this.$refs.paymethods);
                this.$refs.paymethods.scrollIntoView()
            })
        }
    },
}
</script>
<style lang="less" scoped>
@import '../assets/css/variable.less';
.banner-wrap{
    height: 980 * @crem;
    position: relative;
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    .img-bg{
        height: 100%;
    }
    .banner-container{
        position: absolute;
        // width: 100%;
        width: 1920 * @crem;

        height: 100%;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-50%);
        z-index: 10;
        display: flex;
        flex-flow: row nowrap;
        .banner-left{
            box-sizing: border-box;
            padding-top: 206 * @crem;
            height: 100%;
            width: 1000 * @crem;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-end;
            .banner-yunhao{
                width: 787 * @crem;
                height: 134 * @crem;
                background: url('../assets/imgs/aboutus/YUNHAO.png') center no-repeat;
                background-size: cover;
            }
            .banner-science{
                width: 854 * @crem;
                height: 335 * @crem;
                margin-top: 59 * @crem;
                background: url('../assets/imgs/aboutus/banner_science.png') center no-repeat;
                background-size: cover;
            }
            .banner-yunhaokeji{
                height: 57 * @crem;
                margin-top: 36 * @crem;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                align-items: center;
                padding-right: 244 * @crem;
                img:first-child{
                    width: 250 * @crem;
                    height: 39 * @crem;
                    margin-right: 18 * @crem;
                }
                img:last-child{
                    width: 246 * @crem;
                    height: 57 * @crem;

                }
            }
        }
        .banner-right{
            height: 100%;
            box-sizing: border-box;
            padding-top: 362 * @crem;

            padding-left: 57 * @crem;
            // padding-left: 240 * @crem;
            // padding-left: 140 * @crem;
            .banner-right-grid{
                width: 668 * @crem;
                height: 105 * @crem;
                background: url('../assets/imgs/aboutus/grid.png') center no-repeat;
                background-size: cover;
            }
        }

    }
}
.wrap{
    width: 1600 * @crem;
    margin: 0 auto;
}
.company-info{
    box-sizing: border-box;
    height: 812 * @crem;
    padding-top: 92 * @crem;
    .company-info-top{
        height: 337 * @crem;
        // width: 1920 * @crem;
        // margin: 0 auto;
        .company-introduce{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .company-introduce-left{
            font-size: 22 * @crem;
            color: #333333;
            line-height: 38 * @crem;
            text-indent: 2em;
            width: 781 * @crem;
            text-align: left;
            // width: 50%;
            p:last-child{
                margin-top: 47 * @crem;
            }
        }
        .company-introduce-right{
            width: 750 * @crem;
            // width: 800 * @crem;
            // width: 50%;
            
            position: relative;
            left: 50 * @crem;
            img{
                width: 100%;
                height: 800 * @crem;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
}
.corporate-culture{
    background: #EDF2FF;
    position: relative;
    padding-top: 300 * @crem;
    padding-bottom: 170 * @crem;
    .culture-wrap{
        width: 1600 * @crem;
        height: 564 * @crem;
        position: absolute;
        top: -262 * @crem;
        left: 0;
        right: 0;
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .corporate-caption{
        height: 398 * @crem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        .corporate-caption-row1{
            font-weight: normal;
            color: #6F83B6;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            align-items: flex-end;
            h2{
                font-size: 66 * @crem;

            }
            .corporate-caption-dashed{
                width: 656 * @crem;
                border-bottom: 1px dashed #C7C7C7;
                margin-right: 19 * @crem;
            }

        }
        .corporate-caption-row2{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 24 * @crem;
            .corporate-caption-grid{
                width: 573 * @crem;
                height: 90 * @crem;
            }
            .corporate-caption-pic{
                height: 75 * @crem;
                width: 948 * @crem;
            }

        }
    }
    .corporate-culture-container{
        width: 1508 * @crem;
        margin: 0 auto;
        ul{
            overflow: hidden;
            li{
                float: left;
                width: 746 * @crem;
                height: 335 * @crem;
                position: relative;
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                }
                .culture-item-content{
                    box-sizing: border-box;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 5;
                    padding-top:85 * @crem;
                    text-align: center;
                    color: #fff;
                    b{
                        font-size: 48 * @crem;
                        font-weight: 500;
                    }
                    p{
                        font-size: 30 * @crem;
                        margin-top: 32 * @crem;
                        line-height: 50 * @crem;
                        span{
                            opacity: 0;
                        }
                    }
                }
            }
            li:nth-child(2n-1){
                margin-right: 16 * @crem;
            }
            li:nth-child(n+3){
                margin-top: 49 * @crem;
            }
        }
    }
    .develop-caption{
        height: 398 * @crem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        .corporate-caption-row1{
            // font-size: 66 * @crem;
            // font-weight: normal;
            color: #6F83B6;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: flex-end;
            h2{
                font-size: 66 * @crem;

            }
            .corporate-caption-dashed{
                width: 550 * @crem;
                border-bottom: 1px dashed #C7C7C7;
                margin-right: 19 * @crem;
            }

        }
        .corporate-caption-row2{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 24 * @crem;
            .corporate-caption-grid{
                width: 573 * @crem;
                height: 90 * @crem;
            }
            .corporate-caption-pic{
                height: 69 * @crem;
                width: 945 * @crem;
            }

        }
    }
    .develop-chart-wrap{
        padding: 213 * @crem 0;
        padding-left: 100 * @crem;
    }
    .develop-chart{
        width: 834 * @crem;
        height: 834 * @crem;
        border-left: none;
        // border: 1 * @crem solid red;
        position: relative;
         box-sizing: border-box;
         .develop-box{
                background: #474CE5;
                width: 28 * @crem;
                height: 28 * @crem;
                border-radius: 50%;
        }
        .dot-box-content{
            color: #414141;
            text-align: left;
            position: absolute;
            b{
                font-size: 40 * @crem;
                white-space: nowrap;
            }
            p{
                font-size: 24 * @crem;
                line-height: 40 * @crem;
                margin-top: 10 * @crem;
                white-space: nowrap;
            }
        }
        .develop-chart-top{
            width: 634 * @crem;
            height: 498 * @crem;
            box-sizing: border-box;
            position: absolute;
            right: 0;
            top: 0;
            border-style: solid;
            border-color: #474CE5;
            border-width: 8 * @crem 8 * @crem 8 * @crem 0;
            border-top-right-radius: 130 * @crem;
            border-bottom-right-radius: 130 * @crem;
            .dashed-dot{
                position: absolute;
                right: 100%;
                top: -8 * @crem;
                height: 8 * @crem;
                overflow: hidden;
                display: flex;
                flex-flow: row-reverse nowrap;
                .solid-dashed{
                    height: 100%;
                    width: 72 * @crem;
                    background: #474CE5;
                }
                .dashed-wrap{
                    height: 100%;
                    width: 184 * @crem;
                    background: linear-gradient(to right,#EDF2FF,#6E73EB);
                    position: relative;
                    // margin-right: 16 * @crem;
                    ul{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        li{
                            float: right;
                            width: 16 * @crem;
                            height: 100%;
                            margin-right: 30 * @crem;
                            background-color: #EDF2FF;
                        }
                        li:first-child{
                            margin-right: 0;
                        }
                    }
                }
            }
            
            .develop-box1{
                position: absolute;
                top: -4 * @crem;
                left: 0;
                transform: translateY(-50%);
                .dot-box-content{
                    top: 60 * @crem;
                    left: -50 * @crem;
                }
            }
            .develop-box2{
                visibility: hidden;
                position: absolute;
                top: -4 * @crem;
                right: 130 * @crem;
                transform: translateY(-50%);
                .dot-box-content{
                    bottom: 51 * @crem;
                }
            }
            .develop-box3{
                visibility: hidden;
                position: absolute;
                top: 150 * @crem;
                right: -4 * @crem;
                transform: translateX(50%);
                .dot-box-content{
                    left: 62 * @crem;
                    top: -35 * @crem;
                }
            }
            .develop-box4{
                visibility: hidden;
                position: absolute;
                bottom: 100 * @crem;
                right: -4 * @crem;
                transform: translateX(50%);
                .dot-box-content{
                    left: 62 * @crem;
                    top: -20 * @crem;
                }
            }
            .develop-box5{
                visibility: hidden;
                position: absolute;
                bottom: -4 * @crem;
                left: 0;
                transform: translateY(50%);
                .dot-box-content{
                    left: -50 * @crem;
                    bottom: 68 * @crem;
                }
            }
        }
        .develop-chart-bottom{
            box-sizing: border-box;
            height: 344 * @crem;
            width: 700 * @crem;
            position: absolute;
            bottom: 0;
            left: 0;
            border-style: solid;
            border-color: #474CE5;
            border-width: 8 * @crem 0 8 * @crem 8 * @crem;
            border-top-left-radius: 130 * @crem;
            border-bottom-left-radius: 130 * @crem;
            .dashed-dot{
                position: absolute;
                left: 100%;
                bottom: -8 * @crem;
                height: 8 * @crem;
                overflow: hidden;
                display: flex;
                flex-flow: row nowrap;
                .solid-dashed{
                    height: 100%;
                    width: 112 * @crem;
                    background: #474CE5;
                }
                .dashed-wrap{
                    height: 100%;
                    width: 184 * @crem;
                    background: linear-gradient(to right,#6E73EB,#EDF2FF);
                    position: relative;
                    // margin-right: 16 * @crem;
                    ul{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        li{
                            float: left;
                            width: 16 * @crem;
                            height: 100%;
                            margin-left: 30 * @crem;
                            background-color: #EDF2FF;
                        }
                        li:first-child{
                            margin-left: 0;
                        }
                    }
                }
            }
            .develop-box6{
                visibility: hidden;
                position: absolute;
                bottom: -4 * @crem;
                left: 135 * @crem;
                transform: translateY(50%);
                .dot-box-content{
                    left: -61 * @crem;
                    top: 60 * @crem;
                }
            }
            .develop-box7{
                visibility: hidden;
                position: absolute;
                bottom: -4 * @crem;
                right: 130 * @crem;
                transform: translateY(50%);
                .dot-box-content{
                    top: 60 * @crem;
                }
            }
        }
    }
    
}
.honor-wall{
    height: 903 * @crem;
    position: relative;
    .honor-wall-bg{
        width: 100%;
        height: 100%;
    }
    .honor-wrap{
        width: 1920 * @crem;
        // margin: 0 auto;
        // padding-left: 100 * @crem;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    }
    .honor-wall-container{
        height: 836 * @crem;
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 100 * @crem;
        // padding-top: 97 * @crem;
        display: flex;
        .honor-left{
            width: 758 * @crem;
            box-sizing: border-box;
            padding-right: 60 * @crem;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-end;
            padding-top: 178 * @crem;
            .yunhaokeji{
                // width: 530 * @crem;
                height: 100 * @crem;
            }
            .honor-log-wrap{
                height: 68 * @crem;
                margin-top: 41 * @crem;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                align-items: flex-end;
                font-size: 45 * @crem;
                color: #4A72CB;
                font-weight: 500;
                img{
                    height: 100%;
                    // width: 332 * @crem;
                    margin-right: 7 * @crem;
                }
            }
            .honor-grid{
                width: 575 * @crem;
                height: 100 * @crem;
                background: url('../assets/imgs/aboutus/grid.png') center no-repeat;
                background-size: cover;
                margin-top: 41 * @crem;
            }
        }
        .honor-right{
            padding-top: 97 * @crem;
            .honor-box{
                height: 510 * @crem;
                box-sizing: border-box;
                border-left: 1px dashed #ffffff;
                padding: 14 * @crem 0;
                ul{
                    height: 100%;
                    display: flex;
                    flex-flow: column nowrap;
                    align-items: flex-start;
                    justify-content: flex-start;
                    li{
                        flex: 1;
                        font-size: 26 * @crem;
                        color: #fff;
                        padding-left: 32 * @crem;
                        position: relative;
                        // line-height: 30 * @crem;
                        display: flex;
                        align-items: center;
                    }
                    li:before{
                        content: '';
                        display: block;
                        width: 14 * @crem;
                        height: 14 * @crem;
                        border-radius: 50%;
                        position: absolute;
                        top: 50%;
                        left: 0;
                        background: #474CE5;
                        transform: translate(-50%,-50%);
                    }
                }
            }
        }
    }
    }

.partner-recruit{
    height: 678 * @crem;
    position: relative;
    .card-wrap{
        width: 1418 * @crem;
        height: 760 * @crem;
        border-radius: 80 * @crem;
        position: absolute;
        top: -168 * @crem;
        left: 0;
        right: 0;
        margin: 0 auto;
         background: url('../assets/imgs/aboutus/card_bg_2.png') center top -1px no-repeat;
         background-size: 100%;
    }
    .card-container{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width:1348 * @crem;
        height: 662 * @crem;
        box-sizing: border-box;
        border-radius: 80 * @crem;
        background: url('../assets/imgs/aboutus/card_bg.png') center no-repeat;
        background-size: cover;
        padding: 70 * @crem 70 * @crem 85 * @crem 90 * @crem;
        .card-top{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            .card-top-left{
               .yunhao-log{
                   width: 703 * @crem;
                   height: 120 * @crem;
               } 
               .name-row{
                   color: #fff;
                   text-align: left;
                   margin-top: 42 * @crem;
                //    b{
                //        font-size: 67 * @crem;
                //        font-weight: 400;
                //        margin-right: 30 * @crem;
                //    }
                img{
                    width: 200 * @crem;
                    height: 64 * @crem;
                    margin-right: 30 * @crem;
                }
                   p{
                       font-size: 36 * @crem;
                   }
               }
               .card-grid{
                   width: 365 * @crem;
                   height: 58 * @crem;
                   background: url('../assets/imgs/aboutus/white_grid.png') center no-repeat;
                   background-size: cover;
                   margin-top: 37 * @crem;
               }
            }
            .card-top-right{
                display: flex;
                flex-flow: column nowrap;
                justify-content: flex-end;
                align-items: flex-end;
                .business{
                    width: 360 * @crem;
                    height: 94 * @crem;
                }
                b{
                    font-size: 56 * @crem;
                    color: #fff;
                    margin-top: 20 * @crem;

                }
                .card-right-grid{
                    width: 220 * @crem;
                    height: 35 * @crem;
                    background: url('../assets/imgs/aboutus/white_grid.png') center no-repeat;
                    background-size: cover;
                    margin-top: 16 * @crem;
                }
            }
        }
        .card-bottom{
            margin-top: 20 * @crem;
            text-align: left;
            color: #fff;
            b{
               font-size: 50 * @crem; 
               font-weight: bold;
            }
            p{
                text-indent: 2em;
                font-size: 32 * @crem;
                line-height: 49 * @crem;
                margin-top: 10 * @crem;
            }
        }
    }
}
.pay-methods{
    height: 1242 * @crem;
    background: url('../assets/imgs/aboutus/pay_methods_bg.png') left -80 * @crem top 0 no-repeat;
    background-size: 115% 100%;
    box-sizing: border-box;
    // padding: 0 260 * @crem;
    // display: flex;
    // flex-flow: row nowrap;
    .pay-methods-wrap{
        width: 1920 * @crem;
        // width: 100vw;
        margin: 0 auto;
        box-sizing: border-box;
        // padding: 0 260 * @crem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
    .pay-methods-left{
        // flex: 1;
        width: 830 * @crem;
        // width: 1200 * @crem;
        color: #fff;
        box-sizing: border-box;
        padding-top: 250 * @crem;
        text-align: left;
        @media screen and (max-width:1024px) {
            padding-top: 180 * @crem;
        }
        .pay-methods-left-top{
            // padding-top: 177 * @crem;
            
            .terms_pic{
                width: 528 * @crem;
                height: 43 * @crem;
            }
            &>b{
                display: inline-block;
                font-size: 52 * @crem;
                margin-top: 21 * @crem;
                font-weight: bold;
            }
            &>P{
                font-size: 36 * @crem;
                margin-top: 33 * @crem;
                span{
                    display: inline-block;
                    width: 1em;
                }
            }
            .grid{
                width: 624 * @crem;
                height: 65 * @crem;
                background: url('../assets/imgs/aboutus/pay_grid.png') center no-repeat;
                background-size: cover;
                margin-top: 17 * @crem;
            }
            .tips-box{
                margin-top: 42 * @crem;
                width: 792 * @crem;
                p{
                    font-size: 22 * @crem;
                    text-indent: 2em;
                    line-height: 46 * @crem;
                }
            }
        }
        .pay-methods-left-bootom{
            margin-top: 70 * @crem;
            width: 790 * @crem;
            b{
                font-size: 36 * @crem;
                font-weight: bold;
            }
            .explain-wrap{
                margin-top: 24 * @crem;
                p{
                    font-size: 22 * @crem;
                    line-height: 46 * @crem;
                }
            }
        }

    }
    .pay-methods-right{
        padding-top: 420 * @crem;
        // padding-top: 342 * @crem;
        color: #fff;
        // flex: 1;
        width: 560 * @crem;
        padding-left: 155 * @crem;
        .pay-methods-right-top{
            text-align: left;
            b{
                font-size: 34 * @crem;
                font-weight: bold;
            }
            .qrcode-wrap{
                margin-top: 29 * @crem;
                overflow: hidden;
                .qrcode-item{
                    float: left;
                    width: 238 * @crem;
                    margin-right: 42 * @crem;
                    img{
                        width: 100%;
                        height: 238 * @crem;
                    }
                    p{  
                        text-align: center;
                        margin-top: 30 * @crem;
                        font-size: 36 * @crem;
                    }
                }
            }
        }
        .pay-methods-right-bottom{
            margin-top: 75 * @crem;
            text-align: left;
            &>b{
                font-size: 34 * @crem;
                font-weight: bold;
            }
            .count-info-wrap{
                margin-top: 34 * @crem;
                text-align: left;
                li{
                    font-size: 30 * @crem;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    margin-top: 20 * @crem;
                    white-space: nowrap;
                    .lable{
                        width: 120 * @crem;
                        display: flex;
                        justify-content: space-between;
                        flex-flow:  row nowrap;
                        white-space: nowrap;
                        margin-right: 25 * @crem;
                    }
                }
                li:first-child{
                    margin-top: 0;
                }
            }
        }
    }
}
</style>